<!--
 * @Author: YTian
 * @Date: 2023-05-08 21:12:37
 * @LastEditTime: 2023-05-18 14:13:24
 * @Description: app页面
 * @FilePath: \pcsong\src\App.vue
-->
<script setup>
// ========= 导入 底部播放栏组件 ========= //
import Base from '@/components/Base.vue'

// ========= 导入vue api ========= //
import { ref } from 'vue'

// ========= 导入路由 ========= //
import { useRouter } from 'vue-router'

// & 获取路由对象
const router = useRouter()

/**
 * @description: 路由数据添加函数
 * @param {*} name
 * @param {*} query
 * @return {*}
 */
const router_push = (name) => {
	router.push({
		name
	})
}

/**
 * @description: 搜索
 * @return {*}
 */
const search_router = () => {
	if (inputValue.value) {
		router.push({
			name: 'search', // 跳转到搜索页面的名称为search的页面。
			query: {
				keywords: inputValue.value.trim()
			}
		})
	}
}

let inputValue = ref('')
</script>

<template>
	<!-- <Footer /> -->
	<div class="root">
		<div class="main">
			<!-- 顶部搜索栏 -->
			<div class="main__head">
				<!-- 三个小球 -->
				<div class="main__head__balls">
					<span></span>
					<span></span>
					<span></span>
				</div>

				<!-- 后退 -->
				<div class="main__head__retreat" @click="router.go(-1)">
					<svg
						width="36"
						height="36"
						viewBox="0 0 36 36"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M23.25 27L14.25 18L23.25 9"
							stroke="black"
							stroke-width="2.66667"
							stroke-linecap="round"
							stroke-linejoin="round"
						/>
					</svg>
				</div>

				<!-- 前进 -->
				<div class="main__head__advance" @click="router.go(1)">
					<svg
						width="36"
						height="36"
						viewBox="0 0 36 36"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<g clip-path="url(#clip0_23_18)">
							<path
								d="M14.25 9L23.25 18L14.25 27"
								stroke="black"
								stroke-width="2.66667"
								stroke-linecap="round"
								stroke-linejoin="round"
							/>
						</g>
						<defs>
							<clipPath id="clip0_23_18">
								<rect
									width="36"
									height="36"
									fill="white"
									transform="matrix(-1 0 0 -1 36 36)"
								/>
							</clipPath>
						</defs>
					</svg>
				</div>

				<!-- 搜索框 -->
				<div class="main__head__search">
					<div class="icon">
						<svg
							@click.stop="search_router()"
							width="20"
							height="20"
							viewBox="0 0 20 20"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								d="M8.75008 15.8333C12.6621 15.8333 15.8334 12.662 15.8334 8.75C15.8334 4.838 12.6621 1.66667 8.75008 1.66667C4.83808 1.66667 1.66675 4.838 1.66675 8.75C1.66675 12.662 4.83808 15.8333 8.75008 15.8333Z"
								stroke="#6C6C6C"
								stroke-width="2.66667"
								stroke-linejoin="round"
							/>
							<path
								d="M11.1071 5.97629C10.5039 5.37308 9.67057 5 8.75007 5C7.82961 5 6.99627 5.37308 6.39307 5.97629"
								stroke="#6C6C6C"
								stroke-width="2.66667"
								stroke-linecap="round"
								stroke-linejoin="round"
							/>
							<path
								d="M13.8423 13.8424L17.3778 17.3779"
								stroke="#6C6C6C"
								stroke-width="2.66667"
								stroke-linecap="round"
								stroke-linejoin="round"
							/>
						</svg>
					</div>

					<input
						type="text"
						v-model="inputValue"
						@keyup.enter.stop="search_router()"
					/>
				</div>
			</div>

			<!-- 左侧部分 -->
			<div class="main__left">
				<!-- 每一小块 -->
				<div class="main__left__item">
					<!-- 每一小块的标题 -->
					<div class="main__left__item__title">这里放logo</div>
					<!-- 实际内容 -->
					<div @click="router_push('home')">
						<span>
							<svg
								width="22"
								height="22"
								viewBox="0 0 22 22"
								fill="none"
								xmlns="http://www.w3.org/2000/svg"
							>
								<path
									d="M8.25 2.75H3.66667C3.16041 2.75 2.75 3.16041 2.75 3.66667V8.25C2.75 8.75628 3.16041 9.16667 3.66667 9.16667H8.25C8.75628 9.16667 9.16667 8.75628 9.16667 8.25V3.66667C9.16667 3.16041 8.75628 2.75 8.25 2.75Z"
									stroke="#858B98"
									stroke-width="2.66667"
									stroke-linejoin="round"
								/>
								<path
									d="M8.25 12.8333H3.66667C3.16041 12.8333 2.75 13.2437 2.75 13.75V18.3333C2.75 18.8396 3.16041 19.25 3.66667 19.25H8.25C8.75628 19.25 9.16667 18.8396 9.16667 18.3333V13.75C9.16667 13.2437 8.75628 12.8333 8.25 12.8333Z"
									stroke="#858B98"
									stroke-width="2.66667"
									stroke-linejoin="round"
								/>
								<path
									d="M18.3334 2.75H13.75C13.2438 2.75 12.8334 3.16041 12.8334 3.66667V8.25C12.8334 8.75628 13.2438 9.16667 13.75 9.16667H18.3334C18.8396 9.16667 19.25 8.75628 19.25 8.25V3.66667C19.25 3.16041 18.8396 2.75 18.3334 2.75Z"
									stroke="#858B98"
									stroke-width="2.66667"
									stroke-linejoin="round"
								/>
								<path
									d="M18.3334 12.8333H13.75C13.2438 12.8333 12.8334 13.2437 12.8334 13.75V18.3333C12.8334 18.8396 13.2438 19.25 13.75 19.25H18.3334C18.8396 19.25 19.25 18.8396 19.25 18.3333V13.75C19.25 13.2437 18.8396 12.8333 18.3334 12.8333Z"
									stroke="#858B98"
									stroke-width="2.66667"
									stroke-linejoin="round"
								/>
							</svg>
						</span>
						首页
					</div>
				</div>

				<div class="main__left__item">
					<div class="main__left__item__title">歌词</div>
					<div>
						<span>
							<svg
								width="26"
								height="26"
								viewBox="0 0 48 48"
								fill="none"
								xmlns="http://www.w3.org/2000/svg"
							>
								<path
									d="M24 43.9998H10C8.89543 43.9998 8 43.1043 8 41.9998V5.99976C8 4.89519 8.89543 3.99976 10 3.99976H38C39.1046 3.99976 40 4.89519 40 5.99976V23.9998"
									stroke="#1b1b1b"
									stroke-width="4"
									stroke-linecap="round"
									stroke-linejoin="round"
								/>
								<path
									d="M35.5 43.9998V30.9998"
									stroke="#1b1b1b"
									stroke-width="4"
									stroke-linecap="round"
									stroke-linejoin="round"
								/>
								<path
									d="M31 34.4998L32.5 32.9998L35.5 29.9998L38.5 32.9998L40 34.4998"
									stroke="#1b1b1b"
									stroke-width="4"
									stroke-linecap="round"
									stroke-linejoin="round"
								/>
								<path
									d="M16 15.9998H32"
									stroke="#1b1b1b"
									stroke-width="4"
									stroke-linecap="round"
								/>
								<path
									d="M16 23.9998H24"
									stroke="#1b1b1b"
									stroke-width="4"
									stroke-linecap="round"
								/>
							</svg>
						</span>
						歌词
					</div>
				</div>
			</div>

			<!-- 中间部分 -->
			<div class="main__center">
				<Suspense>
					<router-view v-slot="{ Component }">
						<keep-alive>
							<component :is="Component" />
						</keep-alive>
					</router-view>
				</Suspense>
			</div>

			<!-- 底部 -->
			<div class="main__bottom">
				<Suspense> <Base /></Suspense>
			</div>
		</div>
	</div>
</template>

<style scoped>
/* ========= 布局部分 ========= */
.root {
	width: 100%;
	height: 100vh;
	background-color: #f5f5f5;

	overflow-x: auto;
	overflow-y: hidden;
}

.main {
	max-width: 1920px;
	min-width: 1180px;
	width: calc(100% - 8rem);
	height: calc(100% - 8rem);
	display: grid;
	grid-template-columns: 18.375rem 1fr;
	grid-template-rows: 5rem 1fr 6.25rem;
	border-radius: 2.25rem;

	margin: 4rem;
}

.main {
	--border_width: 1px;
	--border_color: #d9d9d9;
}

.main > div {
	position: relative;
	background-color: #fff;
}

.main__head {
	grid-area: 1 / 1 / 2 / 6;
	/* 下边线 */
	border-bottom: var(--border_width) solid var(--border_color);

	border-radius: 2.25rem 2.25rem 0 0;
}

.main__left {
	grid-area: 2 / 1 / 4 / 2;
	/* 右边线 */
	border-right: var(--border_width) solid var(--border_color);

	border-radius: 0 0 0 2.25rem;
}

.main__center {
	grid-area: 2 / 2 / 3 / 3;
}

.main__bottom {
	grid-area: 3 / 2 / 4 / 3;
	/* 上边线 */
	border-top: var(--border_width) solid var(--border_color);

	border-radius: 0 0 2.25rem 0;
}
/* ========= 布局结束啦~ ========= */

/* ========= 头部 ========= */
.main__head__balls {
	position: relative;
	width: 6.75rem;
	height: 100%;
	left: 3.5625rem;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.main__head__balls > span {
	width: 1rem;
	height: 1rem;
	border-radius: 50vmax;
}

.main__head__balls > span:nth-of-type(1) {
	background-color: #ff6c4f;
}

.main__head__balls > span:nth-of-type(2) {
	background-color: #dbb03f;
}

.main__head__balls > span:nth-of-type(3) {
	background-color: #59be62;
}

.main__head__retreat {
	position: absolute;
	width: 36px;
	height: 36px;
	left: 360px;
	top: calc(50% - 36px / 2);
	cursor: pointer;
}

.main__head__advance {
	position: absolute;
	width: 36px;
	height: 36px;
	left: 400px;
	top: calc(50% - 36px / 2);
	cursor: pointer;
}

.main__head__search {
	position: absolute;
	width: 570px;
	height: 40px;
	left: 35.625rem;
	top: calc(50% - 40px / 2);

	background: #f2f3f8;
	border-radius: 50vmin;

	display: grid;
	grid-template-columns: 40px 1fr;
}

.main__head__search > .icon {
	position: relative;
	height: 20px;
	margin-left: 20px;
	top: calc(50% - 20px / 2);
}

.main__head__search > input {
	all: unset;
	margin: 0 1rem;
}
/* ========= 头部部分结束啦~ ========= */

/* ========= 左侧部分 ========= */
.main__left__item {
	width: 100%;
	margin: 1.25rem 0;
	padding-left: 1.5rem;
	color: #858b98;
}

.main__left__item__title.main__left__item__title.main__left__item__title {
	padding-left: 1.5rem;
}

.main__left__item > div {
	padding-left: 3.25rem;
	display: flex;
	gap: 0.75rem;

	margin: 1.125rem 0;
}

.main__left__item > div + div path {
	stroke: currentColor;
}

.main__left__item > div + div:hover {
	cursor: pointer;
	color: #333;
	font-weight: bold;
}

/* ========= 中间部分呢 ========= */
.main__center {
	padding-right: 14px;
	overflow-x: auto;
	overflow-y: overlay;
}
</style>

<style>
* {
	/* 初始化 */
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	/*滚动条动画*/
	scroll-behavior: smooth;
}

::-webkit-scrollbar {
	/* 滚动条宽度 */
	width: 1.1rem;
	/* 滚动条高度 */
	height: 1.1rem;
}

::-webkit-scrollbar-thumb {
	/* 滑块颜色 */
	background-color: #c1c1c1;
	/* 滑块圆角 */
	border-radius: 50vmin;
	/* 添加内外边距(bushi) */
	box-shadow: inset 0 0 0 4px #fff;
}

::-webkit-scrollbar-track {
	/* 滚动条轨道颜色 */
	background-color: transparent;
}
</style>
